﻿@inherits LayoutComponentBase

<MduiLayout Style="min-height:100vh;" AppbarWithToolbar PrimaryColor="@_primaryColor" AccentColor="@_accentColor"
    DarkThemeMode="@_themeMode">
    <MduiAppbar Fixed>
        <MduiToolbar Color="@Colors.Theme.Primary">
            <MduiIconButton Icon="menu" OnClick="_=>_open=!_open" />
            <MduiButton DisableRaised Href="">
                <MduiText Typo="@Typo.title">MduiBlazor</MduiText>
            </MduiButton>
            <MduiButton DisableRaised Href="https://www.mdui.org/" target="_blank">
                <MduiText Typo="@Typo.title">MDUI</MduiText>
            </MduiButton>
            <MduiToolbarSpace />
            @if (Persistent)
            {
                <MduiTooltip Position="@Position.Bottom" Message="设置主题">
                    <MduiIconButton Icon="color_lens" OnClick="@ToggleThemeDialog" />
                </MduiTooltip>
                <MduiTooltip Position="@Position.Bottom" Message="查看 Github">
                    <MduiIconButton Href="https://github.com/gaofen13/mdui-blazor" Target="_blank">
                        <svg class="mdui-icon" viewBox="0 0 36 36">
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"
                                d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z">
                            </path>
                        </svg>
                    </MduiIconButton>
                </MduiTooltip>
            }
            else
            {
                <MduiMenu Icon="more_vert" AlignEnd>
                    <MduiMenuItem OnClick="@ToggleThemeDialog" HelperText="设置主题">
                        <MduiIcon Icon="color_lens" />
                    </MduiMenuItem>
                    <MduiMenuItem Href="https://github.com/gaofen13/mdui-blazor" Target="_blank" HelperText="查看 Github">
                        <svg class="mdui-icon" width="24" height="24" viewBox="0 0 36 36">
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"
                                d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z">
                            </path>
                        </svg>
                    </MduiMenuItem>
                </MduiMenu>
            }
        </MduiToolbar>
    </MduiAppbar>

    <MduiDrawer Class="mdui-shadow-1" UseMduiTypo @bind-Opened="@_open" Fixed Inset="@Persistent"
        Persistent="@Persistent">
        <NavMenu />
    </MduiDrawer>

    <MduiLayoutContent>
        <ErrorBoundary @ref="errorBoundary" Context="ex">
            <ChildContent>
                <MduiContainer>
                    @Body
                    <MduiFab Class="mdui-fab-fixed" OnClick="@ScrollToTopAsync" Hide="@_hideScrollToTop"
                        Color="@Colors.Theme.Primary" Icon="arrow_drop_up" />
                </MduiContainer>
            </ChildContent>
            <ErrorContent>
                <div class="blazor-error-boundary">@ex.Message</div>
            </ErrorContent>
        </ErrorBoundary>
    </MduiLayoutContent>

    <MduiDialog @bind-Open="@_showThemeDialog" Title="设置文档主题" Options="@(new DialogOptions{ Modal = true})">
        <ChildContent>
            <MduiContainer>
                <p>
                    <MduiText Typo="@Typo.title">主题色</MduiText>
                </p>
                <MduiRadioGroup @bind-Value="@_themeMode">
                    <MduiRow BreakpointXs="@Breakpoint.Xs.xs1" BreakpointSm="@Breakpoint.Sm.sm2" BreakpointMd="@Breakpoint.Md.md3">
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Value="@DarkThemeMode.Auto">Auto</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Value="@DarkThemeMode.None">Light</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Value="@DarkThemeMode.Dark">Dark</MduiRadio>
                        </MduiCol>
                    </MduiRow>
                </MduiRadioGroup>
                <p>
                    <MduiText Typo="@Typo.title" Color="@Colors.Theme.Primary">主色</MduiText>
                </p>
                <MduiRadioGroup @bind-Value="@_primaryColor">
                    <MduiRow BreakpointXs="@Breakpoint.Xs.xs1" BreakpointSm="@Breakpoint.Sm.sm2"
                        BreakpointMd="@Breakpoint.Md.md3">
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-amber" Value="@PrimaryColor.Amber">Amber</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-blue" Value="@PrimaryColor.Blue">Blue</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-blue-grey" Value="@PrimaryColor.BlueGrey">
                                BlueGrey
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-brown" Value="@PrimaryColor.Brown">Brown</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-cyan" Value="@PrimaryColor.Cyan">Cyan</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-deep-orange" Value="@PrimaryColor.DeepOrange">
                                DeepOrange
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-deep-purple" Value="@PrimaryColor.DeepPurple">
                                DeepPurple
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-green" Value="@PrimaryColor.Green">Green</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-grey" Value="@PrimaryColor.Grey">Grey</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-indigo" Value="@PrimaryColor.Indigo">Indigo</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-light-blue" Value="@PrimaryColor.LightBlue">
                                LightBlue
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-light-green" Value="@PrimaryColor.LightGreen">
                                LightGreen
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-lime" Value="@PrimaryColor.Lime">Lime</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-orange" Value="@PrimaryColor.Orange">Orange</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-pink" Value="@PrimaryColor.Pink">Pink</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-purple" Value="@PrimaryColor.Purple">Purple</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-red" Value="@PrimaryColor.Red">Red</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-teal" Value="@PrimaryColor.Teal">Teal</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-yellow" Value="@PrimaryColor.Yellow">Yellow</MduiRadio>
                        </MduiCol>
                    </MduiRow>
                </MduiRadioGroup>
                <p>
                    <MduiText Typo="@Typo.title" Color="@Colors.Theme.Accent">强调色</MduiText>
                </p>
                <MduiRadioGroup @bind-Value="@_accentColor">
                    <MduiRow BreakpointXs="@Breakpoint.Xs.xs1" BreakpointSm="@Breakpoint.Sm.sm2"
                        BreakpointMd="@Breakpoint.Md.md3">
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-amber" Value="@AccentColor.Amber">Amber</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-blue" Value="@AccentColor.Blue">Blue</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-cyan" Value="@AccentColor.Cyan">Cyan</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-deep-orange" Value="@AccentColor.DeepOrange">
                                DeepOrange
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-deep-purple" Value="@AccentColor.DeepPurple">
                                DeepPurple
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-green" Value="@AccentColor.Green">Green</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-indigo" Value="@AccentColor.Indigo">Indigo</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-light-blue" Value="@AccentColor.LightBlue">
                                LightBlue
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-light-green" Value="@AccentColor.LightGreen">
                                LightGreen
                            </MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-lime" Value="@AccentColor.Lime">Lime</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-orange" Value="@AccentColor.Orange">Orange</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-pink" Value="@AccentColor.Pink">Pink</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-purple" Value="@AccentColor.Purple">Purple</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-red" Value="@AccentColor.Red">Red</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-teal" Value="@AccentColor.Teal">Teal</MduiRadio>
                        </MduiCol>
                        <MduiCol Class="mdui-m-b-1">
                            <MduiRadio Class="mdui-text-color-yellow" Value="@AccentColor.Yellow">Yellow</MduiRadio>
                        </MduiCol>
                    </MduiRow>
                </MduiRadioGroup>
            </MduiContainer>
        </ChildContent>
        <ActionsContent>
            <MduiButton DisableRaised Class="mdui-float-left" OnClick="@ResetTheme">恢复默认主题</MduiButton>
            <MduiButton DisableRaised OnClick="@ToggleThemeDialog">OK</MduiButton>
        </ActionsContent>
    </MduiDialog>

    <MduiDialogProvider />
    <MduiSnackbarProvider />
</MduiLayout>